<template>
  <div class="pfo-container">
      <div class="pfo-header">
        订单代付
      </div>
      <div class="pfo-content">
          <div class="pfo-logo">
              <img src="static/image/ningjialogo.png" alt="" srcset="">
          </div>
          <div class="pfo-dir">
              <p>
                  您的好友{{pageMsg.userName}}在宁家鲜生上选购好了商品，快去帮他付个款吧！
              </p>
          </div>
          <div class="pfo-order-msg">
              <ul>
                  <li>
                      <label>订单号：</label>
                      <span v-if="orderStatus==0">{{pageMsg.orderNo}}</span>
                      <span v-else>--</span>
                  </li>
                  <li>
                      <label>代付金额：</label>
                      <span v-if="orderStatus==0">¥{{pageMsg.realPay}}</span>
                      <span v-else>--</span>
                  </li>
              </ul>
          </div>
          
          <div class="pfo-confirm">
              <div style="width: 50px">
                  <input v-model="agreeProtocol" class="aui-radio" type="checkbox">
              </div>
              <div @click="agreePro">
                <p>
                    <span>我已清楚了解该订单为为他人付款，商品或服务不归我所有。</span>
                </p>
                <p>
                    为避免风险，建议您在付款前和代付申请人通过电话等方式确认以上信息
                </p>
              </div>
          </div>
      </div>
      <div class="go-pay">
			<div :class="!agreeProtocol ? 'pfodisabled' : '' " class="" id="goPay" @click="payForOthers" >确定支付</div>
      </div>
  </div>
</template>
<script>
    //代付确定支付页面 
    // 代付页面
    import { Toast } from '../../utils/toast'
    export default {
        data() {
            return {
                agreeProtocol: false
            }
        },
        methods: {
            payForOthers() {
                if (!this.agreeProtocol) {
                    return
                }
                
                this.clickDo()
            },
            agreePro() {
               this.agreeProtocol = !this.agreeProtocol
            }
        },
        props: {
            pageMsg: {
                type: Object,
                default: function() {
                    return {userName: "",parentOrderNo: "", realPay: ""}
                }
            },
            clickDo: {
                type: Function
            },
            orderStatus: {
                type: Number,
            }
        }
    }
</script>
<style scoped>
    .pfo-container {
        width: 100%;
        background: #ffffff;
        height: 100%;
    }
    .pfo-container .pfo-header {
        border: none;
        background-size: 100% 1px;
        background-repeat: no-repeat;
        background-position: bottom;
        background-image: -webkit-linear-gradient(90deg,#eaeaea,#eaeaea 50%,transparent 50%);
        background: #fff;
        height: 3rem;
        border-bottom: 1px solid #eaeaea;
        font-size: 1.1rem;
        line-height: 3rem;
        font-weight: 500;
        width: 100%;
        position: fixed;
        top: 0;
        left:0;
    }
    .pfo-container .pfo-content {
        /* padding-top: 3rem;
        padding-bottom: 3rem; */
        background: #ffffff;
        position: fixed;
        top: 3rem;
        bottom: 3rem;
        overflow-x: height;
        overflow-y: auto;
        
    }
    .pfo-container .pfo-content .pfo-logo {
        padding: 1rem 2rem;
    }
    .pfo-container .pfo-content .pfo-dir p{
        font-size: 14px;
        text-align: left;
        padding: 0 0.75rem;
    }
    .pfo-container .pfo-content .pfo-logo img {
        width: 100%;
        height: 100%;
    }
    .pfo-container .pfo-content .pfo-order-msg {
        padding: 0.3rem 0.75rem;
        text-align: left;
        font-size: 16px;
        margin-top: 0.75rem;
        line-height: 2rem;
    }
    .pfo-container .pfo-content .pfo-confirm {
        padding: 0.3rem 1.5rem;
        text-align: left;
        font-size: 14px;
        margin-top: 0.75rem;
        display: flex;
    }
    .go-pay {
        width: 100%;
        height: 2.5rem;
        background: hsla(0,0%,100%,.9);
        overflow: hidden;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #eaeaea;
        z-index: 999;

    }
    #goPay {
        width: 100%;
        height: 100%;
        background: #EF5423;
        text-align: center;
        line-height: 2.5rem;
        color: #ffffff;
        font-size: 1rem;
    }
    .pfodisabled {
        background: #dddddd !important;
    }
</style>
